<template>
  <div class="components-wrap">
    <div class="list">
      <div
        v-for="item in list"
        :key="item.id"
        class="item"
        hover-class="hover"
        hover-start-time="0"
        hover-stay-time="0"
        @click="handleGoToDetail(item)">
        <div class="left">
          <div class="title">{{ item.title }}</div>
          <div class="msg">
            <div class="msg-item" v-if="item.primaryUserName">
              领衔: {{ item.primaryUserName }}
            </div>
            <div class="msg-item" v-if="item.joinUserNames">
              联名: {{ item.joinUserNames }}
            </div>
            <div class="msg-item" v-if="item.adviceTime">
              时间: {{ formatDate(new Date(item.adviceTime), 'yyyy-MM-dd HH:mm') }}
            </div>
          </div>
        </div>
        <div class="right">
          <div class="status">
            {{ item.statusName }}
          </div>
          <div
            v-if="item.showProcess"
            class="btn active"
            hover-class="hover"
            hover-start-time="0"
            hover-stay-time="0"
            hover-stop-propagation
            @click.stop="handleGoToProcess(item)">
            查看进度 >
          </div>
          <div
            v-if="type !== '2' && item.showRefuse"
            class="btn"
            hover-class="hover"
            hover-start-time="0"
            hover-stay-time="0"
            hover-stop-propagation
            @click.stop="handleCancelAccept(item)">
            拒绝联名
          </div>
          <div
            v-if="type !== '2' && item.showAgree"
            class="btn active"
            hover-class="hover"
            hover-start-time="0"
            hover-stay-time="0"
            hover-stop-propagation
            @click.stop="handleAccept(item)">
            同意联名
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { generateImgUrl, formatDate } from '@/utils'
import dealAddress from '@/utils/dealAddress'
import api from '@/api'

export default {
  props: {
    list: {
      type: Array,
      required: true,
    },
    isShowSign: {
      type: Boolean,
      default: false,
    },
    isEnd: {
      type: Boolean,
      default: false,
    },
    type: {
      type: String,
      required: true,
    },
  },
  data () {
    return {
      generateImgUrl,
      dealAddress,
      formatDate,
    }
  },
  methods: {
    handleGoToDetail (item) {
      uni.navigateTo({
        url: `/pages/adviceDetail/index?id=${item.id}`,
      })
    },
    handleGoToProcess (item) {
      uni.navigateTo({
        url: `/pages/adviceProcess/index?id=${item.id}`,
      })
    },
    handleClick () {

    },
    async handleAccept (item) {
      await api.adviceAccept({ id: item.id })
      uni.showModal({
        title: '成功',
        content: '联名成功',
        showCancel: false,
      })
    },
    async handleCancelAccept (item) {
      await api.adviceCancelAccept({ id: item.id })
      uni.showModal({
        title: '成功',
        content: '拒绝联名成功',
        showCancel: false,
      })
    },
  },
}
</script>

<style lang="scss" scoped>
@import "~css/var.scss";

.components-wrap {
	.list {
		.item {
			display: flex;
			margin: 10px 18px 0 18px;
			padding: 15px;
			border-radius: 6px;
			box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, .1);
			background: #fff;

			&.hover {
				background: #f8f8f8;
			}

			.left {
				@include omit;
				flex: 0 0 434rpx;

				.title {
					@include omit;
					line-height: 20px;
					font-weight: 400;
					font-size: 16px;
					color: rgba(0, 0, 0, .9);
					letter-spacing: 1px;
				}

				.msg {
					.msg-item {
						@include omit;
						margin-top: 6px;
						line-height: 14px;
						font-weight: 400;
						font-size: 12px;
						color: rgba(0, 0, 0, .6);
						letter-spacing: 1px;
					}
				}
			}

			.right {
				display: flex;
				flex-direction: column;
				align-items: flex-end;
				flex: 1;

				.status {
					margin-bottom: 7px;
					line-height: 13px;
					font-weight: 400;
					font-size: 10px;
					color: #e51e1e;
				}

				.btn {
					width: 130rpx;
					border-radius: 3px;
					line-height: 22px;
					text-align: center;
					font-weight: 400;
					font-size: 10px;
					color: #fff;
					background: rgba(0, 0, 0, .4);

					&:not(:last-child) {
						margin-bottom: 10px;
					}

					&.active {
						background: #e51e1e;
					}

					&.hover {
						opacity: .6;
					}
				}
			}
		}
	}
}
</style>
